﻿@{
    Layout = "_LayoutH";
    @model ClientInfo
}
<div id="app" v-cloak>
    <form class="form-horizontal" onsubmit="return false">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="c-red">*</span>区域名称：</label>
                <div class="col-sm-10">
                    <select v-model="ParentId" class="form-control">
                        <option v-for="item in DeptNameList" v-bind:value="item.ParentId" v-text="item.ClientArea" v-bind:selected="item.ParentId==ParentId"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">站点名称</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="ClientName" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">经度</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="Longtitude" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">纬度</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="Latitude" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <textarea v-model="Description" class="form-control" rows="3" placeholder="备注...100个字符以内"></textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">{{count}}</em>/100</p>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="pull-right box-tools">
                <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
            </div>
        </div>
    </form>
</div>

@section scripts{
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                submit: "添加",
                ClientId:"@Model.ClientId",
                ClientArea: "@Model.ClientArea",
                ClientName: "@Model.ClientName",
                Longtitude: "@Model.Longtitude",
                Latitude: "@Model.Latitude",
                Description: "@Model.Description",
                ParentId: "@Model.ParentId",
                
                DeptNameList: [],
                DeptNameResultList: @Html.Raw(ViewBag.deptResult),
            },
            computed: {
                count: function () {
                    return this.strLength(this.Description, false);//描述信息字段长度计算
                }
            },
            mounted: function(){
                var _self = this;
                _self.$nextTick(function () {
                    if (_self.ClientId > 0) {
                        _self.submit = "修改";
                    }
                    if (_self.DeptNameResultList.length > 0) {
                        var res = eval("(" + _self.DeptNameResultList + ")");
                        res.forEach((item) => {
                            _self.DeptNameList.push({ ParentId: item.DeptId, /*ClientArea: item.DeptNo,*/ ClientArea: item.DeptName });
                        });
                    }
                    //_self.$refs.Remark.clientWidth = _self.$refs.DeptName.clientWidth;
                });
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                yui.$axiospostform('/Dept/SingleList')
                    .then(function (response) {
                        _self.DeptNameList = [];
                        var result = response.data;
                        result.forEach((item) => {
                            _self.DeptNameList.push({ ParentId: item.DeptId, /*ClientArea: item.DeptNo,*/ ClientArea: item.DeptName });
                        });
                        //_self.DeptNameList.push({ DeptId: null, DeptName: '全部'});
                        layer.close(index);
                    })
                    .catch(function (error) {
                        layer.close(index);
                    });
            },
            methods: {
                addL: function () {
                    var _self = this;
                    if (_self.ClientName.length <= 0) {
                        layer.msg("站点名称不能为空", { icon: 2 });
                        return false;
                    }
                    //if (_self.ClientArea.length <= 0) {
                    //    layer.msg("用户所在区域不能为空", { icon: 2 });
                    //    return false;
                    //}
                    if (_self.ParentId.length <= 0) {
                        layer.msg("区域名称不能为空", { icon: 2 });
                        return false;
                    }
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    var data = {
                        id: _self.ClientId,
                        ClientArea: _self.ClientArea,
                        ClientName: _self.ClientName,
                        Longtitude: _self.Longtitude,
                        Latitude: _self.Latitude,
                        ParentId: _self.ParentId,
                        Description: _self.Description
                    };
                    yui.$axiospostform('/ClientInfo/AddOrUpdate', data)
                        .then(function (response) {
                            if (response.data.Item1 === 101) {
                                layer.tips(response.data.Item2, '..layui-layer-setwin', {
                                    tips: [1, '#3595CC'],
                                    time: 3000
                                });
                                layer.close(index);
                                return false;
                            }
                            if (response.data.Item1) {
                                layer.msg(response.data.Item2, { icon: 1, time: 1000 });
                                setTimeout(function () {
                                    yui.layer_close3();
                                }, 500);
                            } else {
                                layer.msg(response.data.Item2 || errorMsg, { icon: 5 });
                            }
                            layer.close(index);
                            parent.app.searchL();
                        })
                        .catch(function (error) {
                            layer.close(index);
                        });
                },
            },
            watch: {
                ParentId() {
                    let _self = this;
                    console.log(_self.ParentId);
                    let result = _self.DeptNameList.filter(function (data) {
                        return data.ParentId == _self.ParentId;
                    });
                    _self.ClientArea = result[0].ClientArea;
                }
            }
        });
    </script>
}